<template>
    <el-dialog
        :title="title"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @close="closeAction"
        :visible="visible"
    >
        <el-form ref="newForm" :model="newForm" label-width="100px">
            <el-form-item
                label="设备名称："
                prop="name"
                :rules="[
                    {
                        required: true,
                        message: '请输入设备名称',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
            </el-form-item>
            <el-form-item
                label="设备编号："
                prop="number"
                :rules="[
                    {
                        required: true,
                        message: '请输入设备编号',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input placeholder="请输入" v-model.trim="newForm.number"></el-input>
            </el-form-item>
            <el-form-item
                label="安装时间："
                prop="installTime"
                :rules="[
                    {
                        required: true,
                        message: '请选择安装时间',
                        trigger: 'change',
                    },
                ]"
            >
                <el-date-picker
                    v-model="newForm.installTime"
                    type="datetime"
                    format="yyyy-MM-dd hh:mm:ss"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="请选择"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item
                label="安装位置："
                prop="position"
                :rules="[
                    {
                        required: true,
                        message: '请输入安装位置',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input placeholder="请输入" v-model.trim="newForm.position"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
            <el-button type="primary" :loading="adding" @click="submitAction">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
export default {
    name: "newSwitch",
    props: {
        visible: {
            type: Boolean,
        },
        activeData: {
            type: Object,
            default() {
                return null
            },
        },
        activeDevice: {
            type: Object,
            required: true,
        },
        title: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            newForm: {},
            adding: false,
        }
    },
    created() {
        this.initForm()
    },
    methods: {
        closeAction() {
            this.$emit("update:visible", false)
        },

        initForm() {
            if (this.activeData) {
                const { id, name, number, position, installtime, transDeviceCode } = this.activeData
                this.newForm = {
                    id,
                    name,
                    number,
                    position,
                    installTime: installtime,
                    transDeviceCode,
                }
            } else {
                this.newForm = {}
                if (this.$refs["newForm"]) {
                    this.$refs["newForm"].resetFields()
                }
            }
        },

        submitAction() {
            this.$refs["newForm"].validate((valid) => {
                if (valid) {
                    this.$emit("submitting")
                    this.loading = true
                    let params = Object.assign(
                        { transDeviceCode: this.activeDevice.transDeviceCode },
                        this.newForm
                    )
                    this.$ajax({
                        url: "/fireFightingIOT/switch/deviceSwitchAddOrUpdate",
                        method: "post",
                        data: params,
                    }).then(
                        (data) => {
                            this.loading = false
                            this.$message.success("保存成功")
                            this.closeAction()
                            this.$emit("success", data)
                        },
                        (error) => {
                            this.loading = false
                            this.$message.error(error.msg)
                            this.$emit("fail")
                        }
                    )
                } else {
                    return false
                }
            })
        },
    },
}
</script>
